<html>
<head><title>MiniRouter</title></head>
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
  <!-- <script src="https://unpkg.com/vue-router@2.8.1/dist/vue-router.js"></script> -->
  <script src="./vue-router.js"></script>

  <script>
    Vue.use(VueRouter)

    const Home = { template: '<div>home</div>' }
    const Foo = { template: '<div>foo</div>' }

    const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '/', component: Home },
        { path: '/foo', component: Foo },
      ]
    })

    new Vue({
      router,
      template: `
        <div id="app">
          <h1>VueRouter</h1>
          <ul>
            <li><router-link to="/">/home</router-link></li>
            <li><router-link to="/foo">/foo</router-link></li>
          </ul>
          <router-view class="view"></router-view>
        </div>
      `
    }).$mount('#app')
  </script>
</body>
</html>